<template>
  <el-dialog
    title="查看活动地址"
    :model-value="modelValue"
    :modal-append-to-body="false"
    :destroy-on-close="true"
    center
    :before-close="closePopup"
    width="50%"
  >
    <iframe
      id="geoPage"
      width="100%"
      style="height: 60vh; border: none"
      frameborder="0"
      scrolling="no"
      allow="geolocation"
      :src="mapUrl"
    ></iframe>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="mapFn.closePopup">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { ElMessage } from "element-plus";
import { ref, reactive, watch } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";

export default {
  name: "seeAddress copy",
  components: {},
  setup(props, content) {
    // 默认数据备份，以便重置或恢复
    const { $data: mapData, $fn: mapFn } = initData(props, content);
    return {
      mapData,
      mapFn,
      modelValue: props.modelValue,
      mapUrl: props.mapUrl,
    };
  },
  props: {
    modelValue: Boolean,
    mapUrl: String,
  },
};

function initData(props, content) {
  const $fn = {
    closePopup() {
      content.emit("update:modelValue", false);
    },
  };
  return {
    $fn,
  };
}
</script>